<template>
    <div>
        <div class="from">
            <el-form :inline="true" :model="searchMap" class="demo-form-inline" ref="searchFormRef">
                <el-form-item label="根据姓名查询" prop="name" >
                    <el-input v-model="searchMap.name" aria-placeholder="根据姓名查询" style="width: 150px;"></el-input>
                </el-form-item>
                <el-form-item label="学习方向查询" prop="direction">
                    <el-select v-model="searchMap.direction" placeholder="请选择学习方向" clearable style="width: 150px;">
                        <el-option v-for="direction in directionOptions" :key="direction._id" :label="direction.name"
                            :value="direction._id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="班级查询" prop="class">
                    <el-select v-model="searchMap.class" placeholder="请选择班级" clearable style="width: 150px;">
                        <el-option v-for="option in classOptions" :key="option._id" :label="option.classname"
                            :value="option._id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="教师查询" prop="teacher_id">
                    <el-select v-model="searchMap.teacher_id" placeholder="请选择教师" clearable style="width: 150px;">
                        <el-option v-for="teacher in teacherOptions" :key="teacher._id" :label="teacher.name"
                            :value="teacher._id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="学管查询" prop="manager_id">
                    <el-select v-model="searchMap.manager_id" placeholder="请选择学管" clearable style="width: 150px;">
                        <el-option v-for="manager in managerOptions" :key="manager._id" :label="manager.name"
                            :value="manager._id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getPage">查询</el-button>
                    <el-button  @click="resetFrom(searchFormRef)">重置</el-button>
                    <el-button type="primary" @click="addStu">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="students" border style="width: 100%;height: 380px;">
            <el-table-column type="expand">
                <template #default="props">
                    <div style="padding:20px;" class="div-student">
                        <h2>学生姓名: {{ props.row.name }}</h2>
                        <p>性别: {{  dataFilter(props.row.gender,genderOptions)}}</p>
                        <p>所在学校: {{ props.row.school }}</p>
                        <p>专业: {{ props.row.major }}</p>
                        <p>年级: {{ dataFilter(props.row.grade,gradeOptions) }}</p>
                        <p>学历: {{ dataFilter(props.row.education,educationOptions) }}</p>
                        <p>学习方向: {{ dataFilter(props.row.direction,directionOptions) }}</p>
                        <p>身份证号码: {{ props.row.id_number }}</p>
                        <p>电话号码: {{ props.row.phone }}</p>
                        <p>家长姓名: {{ props.row.parent }}</p>
                        <p>家长联系电话: {{ props.row.parent_phone }}</p>
                        <p>家庭住址: {{ props.row.address }}</p>
                        <p>QQ号码: {{ props.row.qq }}</p>
                        <p>所在班级: {{ classFilter(props.row.class,classOptions) }}</p>
                        <p>入学时间: {{ props.row.admission_date }}</p>
                        <p>授课教师: {{ dataFilter(props.row.teacher_id,teacherOptions) }}</p>
                        <p>学管: {{ dataFilter(props.row.manager_id,managerOptions) }}</p>
                        <p>照片:
                            <el-image v-for="(item,index) in props.row.pictures" :key="index" style="width: 200px;height:200px" :src="baseAPI + '/upload/'+item" :max-scale="7" :min-scale="0.2" :preview-src-list="getSrcList(props.row.pictures)" :initial-index="0" fit="cover"></el-image>
                            </p>
                        <p>备注信息: <span v-html="props.row.note"></span></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="80px" />
            <el-table-column label="学生姓名" prop="name" width="100px" />
            <el-table-column label="性别" prop="gender" width="100px">
                <template #default="scope">
                    {{ dataFilter(scope.row.gender,genderOptions) }}
                </template>
            </el-table-column>

            <el-table-column label="学习方向" prop="direction">
                <template #default="scope">
                    {{ dataFilter(scope.row.direction,directionOptions) }}
                </template>
            </el-table-column>

            <el-table-column label="电话号码" prop="phone" />

            <el-table-column label="所在班级" prop="class">
                <template #default="scope">
                    {{ classFilter(scope.row.class,classOptions) }}
                </template>
            </el-table-column>

            <el-table-column label="授课教师" prop="teacher_id">
                <template #default="scope">
                    {{ dataFilter(scope.row.teacher_id,teacherOptions) }}
                </template>
            </el-table-column>

            <el-table-column label="学管" prop="manager_id">
                <template #default="scope">
                    {{ dataFilter(scope.row.manager_id,managerOptions) }}
                </template>
            </el-table-column>

            <el-table-column label="入学时间" prop="admission_date" />

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row._id)">
                        编辑
                    </el-button>
                    <el-button type="danger" @click="handleDelete(scope.row._id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>





        </el-table>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />

    </div>
</template>
<script setup lang="ts">
import type { studentInfoData } from '@/api/student/type';
import { ElMessage, type FormInstance } from 'element-plus';
import { onMounted, ref } from 'vue';
import useStuStore from '@/store/modules/student';
import useClassStore from '@/store/modules/class';
import useRoleStore from '@/store/modules/role';
import useUserStore from '@/store/modules/user';
import type { roleInfoData } from '@/api/role/type';
import type { userInfoData } from '@/api/user/type';
import type { cla } from '@/api/class/type';
import { useRouter } from 'vue-router';
const stuStore = useStuStore();
const classStore = useClassStore();
const roleStore = useRoleStore();
const userStore = useUserStore();
let roleOptions = ref<roleInfoData[]>([]);
let userOptions = ref<userInfoData[]>([]);
let classOptions = ref<cla[] | undefined>([])
const $router =useRouter();
//角色为教师的id
let teacher_role_id = ref<string>("")
//角色为学管的id
let manager_role_id = ref<string>("")
//教师列表
let teacherOptions = ref<userInfoData[]>([])
//学管列表
let managerOptions = ref<userInfoData[]>([])
//性别/年级/学历/学习方向数据类型
interface FilterData {
    _id: string
    name: string
}
//性别数据列表
let genderOptions = ref<FilterData[]>([
    { _id: "1", name: "男" },
    { _id: "0", name: "女" },
])
//年级数据列表
let gradeOptions = ref<FilterData[]>([
    { _id: "1", name: "大一" },
    { _id: "2", name: "大二" },
    { _id: "3", name: "大三" },
    { _id: "4", name: "大四" },
    { _id: "5", name: "在读研究生" }
])
//学历数据列表
let educationOptions = ref<FilterData[]>([
    { _id: "1", name: "专科" },
    { _id: "2", name: "本科" },
    { _id: "3", name: "硕士" },
    { _id: "4", name: "社会" },
])
//学习方向数据列表
let directionOptions = ref<FilterData[]>([
    { _id: "1", name: "web前端" },
    { _id: "2", name: "Java" },
    { _id: "3", name: "C/C++" },
    { _id: "4", name: "少儿编程" },
    { _id: "5", name: "产品经理" },
])
//过渡要显示的数据
const dataFilter = (_id: string, options: any) => {
    //@ts-ignore
    const obj = options?.find(item => item._id == _id);
    return obj ? obj.name : ""
}
//过滤班级 
const classFilter = (_id: string, options: any) => {
    //@ts-ignore
    const obj = options?.find(item => item._id == _id);
    return obj ? obj.classname : ""
}
const getRoleList = () => {
    roleStore.roleList().then(() => {
        roleOptions.value = roleStore.roles as roleInfoData[]
        roleOptions.value?.forEach(item => {
            if (item.name == "教师") {
                teacher_role_id.value = item._id as string
            } else if (item.name == "学管") {
                manager_role_id.value = item._id as string
            }
        })
    })
}
//获取用户列表
const getUserList = () => {
    userStore.getUserAll().then(() => {
        userOptions.value = userStore.users as userInfoData[]
        userOptions.value.forEach(item => {
            if (item.role_id == teacher_role_id.value) {
                teacherOptions.value.push(item)
            } else if (item.role_id == manager_role_id.value) {
                managerOptions.value.push(item)
            }
        })
    })
}
//获取班级列表
const getClassList = () => {
    classStore.allClass().then(()=>{
        classOptions.value = classStore.classes
    })
    //
}
//学生列表
const students = ref<studentInfoData[]>([])

//条件查询收集数据
const searchMap = ref({
    name:"",
    direction:"",
    teacher_id:"",
    manager_id:"",
    class:""
})


/* 分页 */
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);

//显示条数大小改变的时候触发的方法
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    //分页一次
    getPage()
    console.log(`当前一页总条数:${val}`);
}
//改变当前页面
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    //分页一次
    getPage()
    console.log(`当前页码:${val}`);
}
//条件分页查询
const getPage = () => {
    stuStore.pageStu({ page: currentPage.value, size: pageSize.value, searchMap: searchMap.value }).then((res) => {
        students.value = res.data;
        total.value = res.total;
        console.log("res",res);
        
    }).catch(err => {
        ElMessage({
            type: "error",
            message: err.msg
        })
    })
}
//重置
//获取条件查询form表单
const searchFormRef = ref()
//重置条件查询表单
const resetFrom = (formEl:FormInstance|undefined)=>{
    if(!formEl) return;
    formEl.resetFields();
}
/* 添加学生 */
const addStu = ()=>{
    $router.push("/student/update/-1");
}

/* 编辑学生 */
const handleEdit = (_id: string) => {
    $router.push("/student/update/"+_id);
}

const baseAPI = import.meta.env.VITE_APP_BASE_API
const baseURL = import.meta.env.VITE_APP_SERVICE_URL

// VITE_APP_BASE_API = "/dev-api"
// VITE_APP_SERVICE_URL = "http://localhost:3000"
//处理显示图片浏览大图地址
const getSrcList = (imgList:string[])=>{
    return imgList.map(item=>baseAPI + "/upload/" +item);
}
/* 删除学生 */
const handleDelete = (_id: string) => {
 
    
    stuStore.deleteStu(_id).then(()=>{
        
        getPage();
        ElMessage({
            type:"success",
            message:"删除成功"
        })
    })
}

onMounted(() => {
    getRoleList();
    getUserList();
    getClassList();
    getPage();
})
</script>

<style scoped>
.el-pagination {
    display: flex;
    justify-content: center;
}

.div-student {
    background-color: aliceblue;
}
.from{
    margin: 20px;
}
</style>